<script setup>
import Card from '../components/Card.vue';
import FullScreen from '../components/FullScreen.vue';
import Temp from '../components/Temp.vue';

const props =  defineProps({
    msg: {
        type: String,
        required: true
    },
    data: {
        type: Object,
        required: false,
        default (){
        return [
            {title: '石油天然气', url: '/',image:'/src/assets/WX20240324-021156@2x%201.png',infor:'冶金行业常用阀门的标准 截止阀是常用的阀门类型,用于截断管道中的流体。在冶金行业中,截止阀多采用国家标准GB、行业标准JB、美国标准API、英国标准BS、德国标准DIN等标准。通常情况下,压力等级为PN10、PN16、PN25、PN40等。 球阀是利用球体转动实现开关的一种阀门，广泛应用于冶金行业的输送管道和设备上。冶金行业常用阀门的标准 截止阀是常用的阀门类型,用于截断管道中的流体。在冶金门，广泛应用于冶金行业的输送管道和设备上。'},
            {title: '冶金行业', url: '/',image:'/src/assets/WX20240324-021156@2x%201.png',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
            {title: '精细化工', url: '/',image:'/src/assets/WX20240324-021156@2x%201.png',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
            {title: '电力行业', url: '/',image:'/src/assets/WX20240324-021156@2x%201.png',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
            {title: '食品医药', url: '/',image:'/src/assets/WX20240324-021156@2x%201.png',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
        ]
        }
    },
    typelist: {
        type: Object,
        required: false,
        default(){
            return [
                {id:1, title:'截止式调节阀'},
                {id:2, title:'自立式调节阀 '},
                {id:3, title:'ZSDV/SPV球阀'},
                {id:4, title:'ZSDV/SPV蝶阀'},
                {id:5, title:'ZSDV/SPV闸阀/截止阀'},
            ]
        }
    }
})
</script>

<template>
    <Temp lit=[]>
        <div class="w-full container mx-auto pt-24 mobile:px-6">
            <div class="w-full h-auto self-center bg-no-repeat ">
                <div class="flex mb-[80px] mobile:mb-12">
                    <span class="text-5xl text-dominant font-bold mobile:text-3xl">产品中心</span>
                </div>
                <div class="w-full flex mobile:block">
                    <div class="w-1/5 pr-16 mobile:w-full mobile:hidden">
                        <ul class="w-full wow animate__animated animate__fadeInUp timing">
                            <li v-for="(item, index) in typelist" :key="index" class="w-full py-8 flex items-center text-xl font-medium">
                                <a :href="item.id" class="flex-auto" >{{ item.title }}</a>
                                <img class="w-8" src="/src/assets/fa_angle_right_black_60.svg" alt="" srcset="">
                            </li>
                        </ul>
                    </div>
                    <div class="w-4/5 flex-atuo mobile:w-full" >
                        <div class="w-full  wow animate__animated animate__pushOnRight timing" data-wow-duration="0.5s" data-wow-delay="0.5s" v-for="(item, index) in typelist" :key="index">
                            <div class="w-full relative text-2xl  mb-12 mobile:mb-4 mobile:text-xl">
                                <div class="inline-block p-6 bg-dominant text-white mobile:p-3">{{ item.title }}</div>
                                <div class="inline-block p-6 bg-dominant wen-tcel -translate-x-0.5 mobile:p-3 mobile:-translate-y-0.2">&nbsp;&nbsp;&nbsp;</div>
                            </div>
                            <div class="w-full grid grid-cols-3 justify-items-center mb-24 mobile:mb-9 mobile:grid-cols-2">
                                <Card v-for="(item2, index2) in data" :key="index2" :data="item2"></Card>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Temp>
</template>
<style scoped>
ul.grid li.active{
  border-color: #2F3767;
  color: #2F3767
}
.mask::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #2F3767cc;
    pointer-events: none;
}
.wen-tcel{
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 66% 100%, 18% 0, 27% 0, 75% 100%, 26% 100%, 6% 100%, 100% 100%, 51% 0);
    clip-path: polygon(0% 0%, 0% 100%, 66% 100%, 18% 0, 27% 0, 75% 100%, 26% 100%, 6% 100%, 100% 100%, 51% 0);
}
</style>